<template>
    <div class="son">
        <h3>子组件 2</h3>
        <!-- 
            8. 使用通过 props 接收的兄弟组件
            传递过来的数据（父组件为桥梁）
         -->
        <p>兄弟组件传递过来的数据：{{ data }}</p>
    </div>
</template>

<script setup>
// 导入 Vue 3 的内置函数
import {
    defineProps
} from 'vue'

// 7. 通过 props 接收父组件中传递过来的
// 暂存在父组件的兄弟组件的数据
// 通过 props 接收的数据在模板中可以直接使用
// 无需 props.属性名
const props = defineProps(['data'])
</script>

<style lang="scss" scoped>
.son {
    height: 150px;
    width: auto;
    margin: 10px;
    background-color: chartreuse;
}
</style>